
<template>
    <div class="table">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="采集时间" width="180"></el-table-column>
            <el-table-column prop="area_name" label="所属区域" width="100"></el-table-column>
            <el-table-column prop="p_name" label="项目名称" width="100"></el-table-column>
            <el-table-column prop="name" label="设备名称" width="100">
               <template slot-scope="scope">
                    <span :style="{color:(scope.row.status!='正常')?'red':''}">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="water_level" label="水位(米)" width="100"></el-table-column><!--582.17-->
            <!-- <el-table-column prop="water_standard" label="警戒水位值(米)" width="150"></el-table-column> -->
            <el-table-column prop="water_number" label="流量(立方米/秒)" width="150"></el-table-column> <!--453.7-->
            <!-- <el-table-column prop="water_number_" label="警戒流量值" width="120"></el-table-column> 453.7 -->
            <el-table-column prop="gate" label="闸门开度" width="100"></el-table-column>
            <el-table-column prop="status" label="运行状态" width="100" align="center">
               <template slot-scope="scope">
                    <i :style="{color:(scope.row.status=='正常')?'green':'red'}" class="sl-icon sl-jingbao fz20"></i>
                </template>
            </el-table-column>
            <el-table-column prop="mark" label="备注" width="">
               <template slot-scope="scope">
                    <span :style="{color:(scope.row.status!='正常')?'red':''}">{{scope.row.mark}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class="mt20"
            background
            layout="prev, pager, next"
            :total="100">
        </el-pagination>
    </div>
</template>

<script>
import tableData from '@/utils/historydata.js'
export default {
  name: "tableData",
  data() {
    return {
       tableData:tableData
    };
  },
  methods: {
    
  }
};
</script>

<style scoped>

</style>

